<template>
  <div class="container">
    <div v-if="pathName === '图片收集'"><MyPicAboutMe /></div>
    <div v-else-if="pathName === '视频'" class="video">
      <div class="study">
        <p>学习视频</p>
        <a
          href="https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from=333.999.0.0"
          target="_blank"
        >
          【尚硅谷】前端零基础入门HTML5+CSS3基础教程
        </a>
        <a
          href="https://www.bilibili.com/video/BV1YW411T7GX?spm_id_from=333.999.0.0"
          target="_blank"
        >
          【尚硅谷】JavaScript基础&实战丨JS入门到精通全套完整版
        </a>
        <a
          href="https://www.bilibili.com/video/BV1Zy4y1K7SH?spm_id_from=333.999.0.0"
          target="_blank"
        >
          【尚硅谷】Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
        </a>
      </div>
      <div class="lift">
        <p>生活段子</p>
        <a
          href="https://www.bilibili.com/video/BV1h34y147o3?spm_id_from=333.337.search-card.all.click"
          target="_blank"
        >
          【邓园长】半岛铁盒~我真的没有鱿鱼！
        </a>
        <a
          href="https://www.bilibili.com/video/BV1Yb4y1C7RK?spm_id_from=333.337.search-card.all.click"
          target="_blank"
        >
          【邓园长】我毕业啦！
        </a>
        <a
          href="https://www.bilibili.com/video/BV1vL4y157R1/?spm_id_from=333.788.recommend_more_video.1"
          target="_blank"
        >
          【Vlog】人员近百！影视飓风的下一步是...
        </a>
        <a
          href="https://www.bilibili.com/video/BV1F44y1G7VV?spm_id_from=333.851.b_7265636f6d6d656e64.5"
          target="_blank"
        >
          电影里那些无法超越，寓意深刻的台词。
        </a>
      </div>
    </div>
    <div v-else-if="pathName === '网络基础'" class="http">
      <div class="content">
        <a href="http://" target="_blank">HTTP与HTTPS</a>
        <a href="http://" target="_blank">HTTP(S)如何优化</a>
        <a href="http://" target="_blank">GET与POST</a>
        <a href="http://" target="_blank">TCP建立连接与断开连接</a>
        <a href="http://" target="_blank">TCP重传机制</a>
      </div>
    </div>
    <div v-else-if="pathName === 'js数据结构与算法'" class="algorithm">
      <div class="content">
        <a href="http://" target="_blank">数组专题</a>
        <a href="http://" target="_blank">链表专题</a>
        <a href="http://" target="_blank">树专题</a>
        <a href="http://" target="_blank">动态规划专题</a>
        <a href="http://" target="_blank">回溯专题</a>
      </div>
    </div>
    <div v-else-if="pathName === '文章'" class="papers">
      <div class="content">
        <a
          href="https://blog.csdn.net/weixin_41910251/article/details/120779920?spm=1001.2014.3001.5502"
          target="_blank"
          >React面向组件编程</a
        >
        <a
          href="https://blog.csdn.net/weixin_41910251/article/details/120764547?spm=1001.2014.3001.5502"
          target="_blank"
          >了解React的基本知识</a
        >
        <a
          href="https://blog.csdn.net/weixin_41910251/article/details/120411033?spm=1001.2014.3001.5502"
          target="_blank"
          >Node.js</a
        >
      </div>
    </div>
    <div v-else-if="pathName === '前端入门'" class="base">
      <div class="content">
        <div class="content_list">
          <p href="http://" target="_blank">HTML基础</p>
          <span>HTML基本结构</span>
          <span>HTML基本语法</span>
          <span>HTML语义标签</span>
        </div>
        <div class="content_list">
          <p href="http://" target="_blank">CSS基础</p>
          <span>CSS基本样式</span>
          <span>CSS选择器</span>
          <span>CSS引入方式</span>
        </div>
        <div class="content_list">
          <p href="http://" target="_blank">JavaScript基础</p>
          <span>JS基本结构</span>
          <span>JS基本语法</span>
          <span>JS事件绑定</span>
          <span>JS事件循环机制</span>
          <span>表单提交</span>
        </div>
      </div>
    </div>
    <div v-else class="other">
      <h4 class="title">21世纪大事件</h4>
      <div class="tab">
        <span class="tabList">作者：影子</span>
        <span class="tabList">时间：2022-04-23</span>
        <span class="tabList">分类：记录生活</span>
        <span class="tabList">666条评论</span>
      </div>
      <div>
        <h3 class="title_list">新冠疫情</h3>
        <span class="content">
          2019年12月以来，湖北省武汉市持续开展流感及相关疾病监测，发现多起病毒性肺炎病例，均诊断为病毒性肺炎/肺部感染
          。
          2020年1月20日，习近平对新型冠状病毒感染的肺炎疫情作出重要指示，强调要把人民群众生命安全和身体健康放在第一位，坚决遏制疫情蔓延势头
          。1月27日，受习近平总书记委托，中共中央政治局常委、国务院总理、中央应对新型冠状病毒感染肺炎疫情工作领导小组组长李克强来到武汉，考察指导疫情防控工作，看望慰问患者和奋战在一线的医护人员
        </span>
        <h3 class="title_list">新冠疫情</h3>
        <span class="content">
          2019年12月以来，湖北省武汉市持续开展流感及相关疾病监测，发现多起病毒性肺炎病例，均诊断为病毒性肺炎/肺部感染
          。
          2020年1月20日，习近平对新型冠状病毒感染的肺炎疫情作出重要指示，强调要把人民群众生命安全和身体健康放在第一位，坚决遏制疫情蔓延势头
          。1月27日，受习近平总书记委托，中共中央政治局常委、国务院总理、中央应对新型冠状病毒感染肺炎疫情工作领导小组组长李克强来到武汉，考察指导疫情防控工作，看望慰问患者和奋战在一线的医护人员
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import MyPicAboutMe from "../../MyPicAboutMe";
export default {
  name: "",
  components: { MyPicAboutMe },
  data() {
    return {
      pathName: "", //表示当前应该展示组件
    };
  },
  mounted() {
    // 接收兄弟组件Echarts传递过来的pathName
    this.$bus.$on("chooseItem", (data) => {
      this.pathName = data;
    });
  },
  watch: {
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  overflow: auto; //当内容超出知道高度时出现滚动条
  font-size: 16px;
  overflow-x: hidden; //去除水平滚动条
  p {
    display: flex;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    background-color: rgba(175, 206, 252, 0.3);
    border-radius: 15px;
  }
  p:hover {
    background-color: rgba(175, 206, 252, 1);
  }
  a {
    display: flex;
    justify-content: center;
    text-decoration: none;
    // width: 500px;
    margin: 10px;
    padding: 4px;
    height: 40px;
    line-height: 40px;
    border-radius: 15px;
    color: black;
    background-color: rgba(175, 206, 252, 0.3);
  }
  a:hover {
    background-color: rgba(175, 206, 252, 1);
  }
  .other {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-decoration: none;
    // width: 550px;
    .title {
      font-size: 20px;
      height: 45px;
      line-height: 55px;
      border-radius: 15px;
      margin-top: -20px;
    }
    .tab {
      margin: 7px;
      .tabList {
        border-right: 1px solid #e0c7c7;
        padding: 0 10px;
      }
      .tabList:last-child {
        border: none;
      }
    }
    .title_list {
      font-size: 16px;
    }
    .content {
      margin: 5px;
      // 多行文本溢出隐藏
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      // 首行文本缩进2字符
      text-indent: 2rem;
    }
  }
  .base {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .content_list {
      /*  p {
        display: flex;
        justify-content: center;
        padding-left: 15px;
        padding-right: 15px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        background-color: rgba(175, 206, 252, 0.3);
        border-radius: 15px;
      }
      p:hover {
        background-color: rgba(175, 206, 252, 1);
      } */
      span {
        display: inline-block;
        margin-left: 10px;
        margin-top: 8px;
        padding-left: 15px;
        padding-right: 15px;
        height: 35px;
        line-height: 35px;
        background-color: rgba(196, 219, 253, 0.3);
        border-radius: 15px;
      }
      span:hover {
        background-color: rgba(196, 219, 253, 1);
      }
    }
  }
}
</style>